<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
            background-color: #000;
        }

        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            width: 800px;
            height: 500px;
            background-color: #000;
            cursor: crosshair;
        }

        /* 小方格样式 */
        .small {
            width: 12px;
            height: 12px;
            border: 1px solid black;
            list-style-type: none;
            background-color: #5b5555;
        }

        #clear {
            position: absolute;
            top: 30px;
            right: 50%;
            width: 80px;
            height: 40px;
            background-color: #eaa2a2;
            border: 1px solid #fff;
            border-radius: 20px;
            font-size: 18px;
            font-weight: 800;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }

        #colorUl {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .color {
            width: 50px;
            height: 50px;
            cursor: pointer;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <ul class="main"></ul>
    <ul id="colorUl">
        <li class="color"></li>
        <li class="color"></li>
        <li class="color"></li>
        <li class="color"></li>
        <li class="color"></li>
        <li class="color"></li>
        <li class="color"></li>
        <li class="color"></li>
    </ul>
    <button id="clear">清除</button>
</body>

<script>

    // 生成小方块
    let OMain = document.querySelector('.main');
    for (let i = 0; i < 2772; i++) {
        let OLi = document.createElement('li');
        OLi.className = 'small';
        OMain.appendChild(OLi);
    }


    // 生成选择颜色小方块
    let colorArr = ['#fff', '#e77b7b', '#d5dc77', '#7adc77', '#69d8d4', '#49add7', '#b849d7', '#d749a8'];
    let OColor = document.querySelectorAll('.color');
    OColor.forEach((item,index)=>{
        item.style.backgroundColor = colorArr[index];
    })
 

    // 点击选择颜色
    let OColorUl = document.querySelector('#colorUl');
    let color = '#fff';
    OColorUl.addEventListener('click',function(e){
        color = e.target.style.backgroundColor;//此时color是rgb格式
    })


    // 画画
    // 设置状态默认是false 鼠标按下变为true 鼠标弹起变为false
    let status = false;
    window.onmousedown = function () {
        status = true;
    }
    window.onmouseup = function () {
        status = false;
    }
    OMain.addEventListener('mouseover', function (e) {
        // 判断 鼠标是否在小方格上 和 鼠标是否按下
        if (e.target.className != 'main' && status) {
            e.target.style.backgroundColor = color;
        }
    })


    //禁止 拖拽鼠标图案
    OMain.ondragenter = function (e) { e.preventDefault(); }
    OMain.ondragover = function (e) { e.preventDefault(); }
    // 禁止鼠标左键 复制鼠标图案
    window.onselectstart = function (e) { e.preventDefault(); }


    //清空
    let OClear = document.querySelector('#clear');
    let OSmall = document.querySelectorAll('.small');
    OClear.addEventListener('click', function () {
        OSmall.forEach((item) => {
            item.style.backgroundColor = '#5b5555';
        })
    })
</script>

</html>